import { Link } from "react-router-dom";
import useList from "../hooks/use-list"
const PlantList = () => {
    const [list, loading, collect] = useList();
    const collectList = list.filter(item=>item.isCollect);
    return (
        <div>
            <h2>收藏列表</h2>
            {
                collectList.map(item => (
                    <li key={item.plantID}>
                        <Link to={'/plantList/' + item.plantID}>{item.name}</Link>
                        <button
                            onClick={() => collect(item.plantID)}
                        >
                            取消收藏
                        </button>
                    </li>
                ))
            }
            <hr />
            {
                loading
                    ? 'loading......'
                    : list.map(item => (
                        <li key={item.plantID}>
                            <Link to={'/plantList/' + item.plantID}>{item.name}</Link>
                            <button
                                onClick={() => collect(item.plantID)}
                            >
                                {
                                    item.isCollect
                                        ?'取消收藏'
                                        :'收藏'
                                }
                            </button>
                        </li>
                    ))
            }
            {/* {
                list.map(item=>(
                    <li key={item.plantID}>{item.name}</li>
                ))
            } */}
        </div>
    )
}

export default PlantList